<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps<{
  title: string;
  yellow?: boolean;
  preview?: boolean;
}>();
const backgroundColor = computed(() => (props.yellow ? "yellow" : "white"));
</script>

<template>
  <div class="box" :style="{ backgroundColor }">
    {{ title }}
  </div>
</template>

<style  scoped>
.box {
  padding: 10px 10px;
  border: 1px dashed gray;
  cursor: move;
}
</style>

<!--
:style="{ backgroundColor }" :role="preview ? 'BoxPreview' : 'Box'"
-->